
<template>
  <div class="accountList">
    <div class="searchBox">
      <el-form :model="searchForm" ref="searchFormRef">
        <el-row>
          <el-form-item prop="phone">
            <div class="item">
              <span v-html="'创建账号'" class="nameSpan"></span>
              <el-input
                size="mini"
                v-model="searchForm.phone"
                placeholder="请输入创建账号"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="name">
            <div class="item">
              <span v-html="'创建人'" class="nameSpan"></span>
              <el-input
                size="mini"
                v-model="searchForm.name"
                placeholder="请输入创建人"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item">
              <span v-html="'创建时间'" class="nameSpan"></span>
              <el-date-picker
                size="mini"
                class="dataPicker"
                v-model="searchForm.beginTime"
                type="datetime"
                placeholder="开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions0"
                default-time="08:00:00"
              >
              </el-date-picker>
              <span style="color: #d9d9d9">-</span>

              <el-date-picker
                size="mini"
                class="dataPicker"
                v-model="searchForm.endTime"
                type="datetime"
                placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions1"
                default-time="08:00:00"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="searchClick"
              icon="el-icon-search"
              type="primary"
              size="mini"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetClick"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tableBox" ref="tableBoxRef">
      <el-table
      :height="655"
        v-loading="tableLoading"
        :header-cell-style="{
          background: '#F8F8F8',
          color: '#333',
          fontSize: '16px',
          fontWeight: '700',
        }"
        border
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          align="center"
          label="方案名称"
           
        >
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="创建人"
           
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="创建账号"
           
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
           
        >
          <template slot-scope="scope">{{
            scope.row.createTime | formatDate
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit-outline"
              size="mini"
              type="text"
              v-has="'efficacy:user:plan:info'"
              @click="changeComments(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-card class="footer" v-if="total > 0">
         <div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
       </el-card>
    </div>
    <el-dialog :close-on-click-modal="false" 
      title="查看详情"
      :visible.sync="dialogVisible"
      width="700px"
      class="addEditAccountDialog"
    >
      <div class="content">
        <el-table
          :header-cell-style="{
            background: '#F8F8F8',
            color: '#333',
            fontSize: '16px',
            fontWeight: '700',
          }"
          border
          :data="itemData"
          style="width: 100%;margin-bottom:20px"
        >
          <el-table-column
            prop="title"
            align="center"
            label="方案名称"
             
          >
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="创建人"
             
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            align="center"
            label="创建账号"
             
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
             
          >
            <template slot-scope="scope">{{
              scope.row.createTime | formatDate
            }}</template>
          </el-table-column>
        </el-table>
        <div class="">
          <div style="font-size:17px;margin-bottom:10px">用户选择内容</div>
          <div style="font-size: 15px">
            <div>一、使用人群：{{ crowdDictMap[detailData.crowdDict] }}</div>
            <div>二、功效：
               <div style="display:inline-block" v-for="(itemChild,indexChild) in detailData.efficacyDictList" :key='indexChild'>
            {{effectListMap[itemChild]}}{{indexChild === detailData.efficacyDictList.length-1 ? " ":" 、"}}

           </div>
            </div>
            <div>三、使用部位：
              <div style="display:inline-block" v-for="(itemChild,indexChild) in detailData.positionDictList" :key='indexChild'>
            {{effectivePartMap[itemChild]}}{{indexChild === detailData.positionDictList.length-1 ? " ":" 、"}}

           </div>
            </div>
            <div>四、受试者信息：</div>
            <div style="margin-left:20px;font-size:14px;margin-bottom:20px">
            <div>①受试者人数：{{ detailData.manCount }}</div>
            <div>②受试者性别：{{ detailData.sex }}</div>
            <div>③受试者年龄：{{ detailData.age }}</div>
            <div>④受试者肤质：{{ detailData.skinQuality }}</div>
            <div v-if="detailData.price == -1">受试者价格：咨询</div>
            <div v-else>受试者价格：{{ detailData.price }}</div>
            </div>
            <div style="margin-bottom:20px">五、试验参数和对应设备：</div>
            <el-table
              :header-cell-style="{
                background: '#F8F8F8',
                color: '#333',
                fontSize: '16px',
                fontWeight: '700',
              }"
              border
              :data="detailData.parameters"
              style="width: 100%"
            >
              <el-table-column
                prop="efficacyId"
                align="center"
                label="功效"
                 
              >
              <template slot-scope="scope">
                {{effectTypeMap[scope.row.efficacyId]}}
              </template>
              </el-table-column>
              <el-table-column
                prop="evaluateId"
                align="center"
                label="功效评价"
                 
              >
              <template slot-scope="scope">
 {{effectJudgmentMap[scope.row.evaluateId]}}
              </template>
              </el-table-column>
              <el-table-column
                prop="positionIds"
                align="center"
                label="部位"
                 
              >
              <template slot-scope="scope">
                <div style="display:inline-block" v-for='(item,index) in scope.row.positionIds' :key='index'>
{{effectivePartMap[item]}}
                </div>
              </template>
              </el-table-column>
              <el-table-column
                prop="must"
                align="center"
                label="参数及设备"
               
              >
              </el-table-column>
              <el-table-column
                prop="time"
                align="center"
                label="时间"
                 
              >
              <template slot-scope="scope">
                  基值、第{{scope.row.time}}天
              </template>
              </el-table-column>
              <el-table-column
                prop="price"
                align="center"
                label="价格"
                 
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.price == -1">咨询</div>
                  <div v-else>{{ scope.row.price }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      pickerOptions0: {
        disabledDate: (time) => {
          //如果选择了结束时间返回的时间就要不能大于开始时间并且当前之前的时间也不可以选择
          if (this.searchForm.endTime) {
            return (
              time.getTime() > new Date(this.searchForm.endTime).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.searchForm.beginTime) {
            return (
              time.getTime() <
              new Date(this.searchForm.beginTime).getTime() -
                1 * 24 * 60 * 60 * 1000
            ); //可以选择同一天
          }
        },
      },
      title: "",
      searchForm: {
        phone: "",
        name: "",
        beginTime: "",
        endTime: "",
      },
      tableLoading: false,
      tableHeight: 50,
      tableData: [],
      pageNum: 1,
      pageSize: 15,
      total: 0,
      detailData: {},
      itemData: [],
    };
  },

  computed: {
    ...mapGetters(["permissions","dictList"]),
     effectListMap() {
      let map = {}
      this.dictList.effect_type.forEach(x => {
        map[x.k] = x.v
      })
      return map
    },
     crowdDictMap() {
      let map = {}
      this.dictList.users.forEach(x => {
        map[x.k] = x.v
      })
      return map
    },
     effectTypeMap() {
      let map = {}
      this.dictList.effect_type.forEach(x => {
        map[x.k] = x.v
      })
      return map
    },
     effectJudgmentMap() {
      let map = {}
      this.dictList.effect_judgment.forEach(x => {
        map[x.k] = x.v
      })
      return map
    },
    effectivePartMap() {
      let map = {}
      this.dictList.effective_part.forEach(x => {
        map[x.k] = x.v
      })
      return map
    },
  },
  created() {
    this.getEfficacyList();
  },
  methods: {
    async changeComments(row) {
       this.itemData=[]
      this.dialogVisible = true;
      this.itemData.push(row);
      
      const res = await this.$api.usereffDetail(row.id);
      this.detailData = res.data.result;
    },

    searchClick() {
      this.pageNum = 1;
      this.getEfficacyList();
    },
    resetClick() {
      this.$refs.searchFormRef.resetFields();
      this.pageNum = 1;
      this.getEfficacyList();
    },

    /**
     * 获取用户列表
     * @param {*}
     */
    async getEfficacyList() {
      this.tableLoading = true;
      await this.$api
        .usereffList({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          ...this.searchForm,
        })
        .then((res) => {
          if (res.data.code == "00000") {
            this.total = res.data.result.total;
            this.tableData = res.data.result.list;
            this.tableLoading = false;
          }
        });
    },
    /**
     * 切换页面大小
     * @param {*} val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getEfficacyList();
    },

    /**
     * 页码切换
     * @param {*} val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getEfficacyList();
    },
  },
};
</script>

<style lang="less" scoped>
.accountList {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  .searchBox {
    .el-row {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        margin-bottom: 0;
      }
      .item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .nameSpan {
          padding-right: 10px;
          box-sizing: border-box;
          white-space: nowrap;
        }
        .el-input {
          width: 162px;
        }
      }
    }
  }
   .topBtn {
    margin: 10px 0;
text-align: right;
  }

  .addEditAccountDialog {
    .el-form-item {
      .el-select {
        width: 100%;
      }
    }
    .btns {
      text-align: right;
      margin-bottom: 0;
    }
  }
}
/deep/.el-button--success.is-plain {
  color: #fff;
  border-color: #409eff;
  background-color: #409eff;
}
/deep/.el-form-item {
  margin-bottom: 12px;
}
.content {
  height: 60vh;
  overflow-x: hidden;
}
/deep/.el-upload--picture-card {
  width: 400px;
  height: 270px;
}
/deep/.el-upload--picture-card i {
  margin-top: 128px;
}

</style>